
import React , { Component } from 'react';
import DaoDemo1 from '../../../components/dragDemo1/daoDemo1/index';
import { Modal,Tooltip, message,Row,Col, Input,Form,Select } from 'antd';
import {connect} from 'react-redux';
import {setEditDepthData1,getCurvesIntoDao1,getDaosMb1,initDaosDataList1,initdocData,initmbData,setDocInReducer,setMbInReducer,doNull} from '../../../redux/actions';   //,getDaosMbShow
import SelectFileForm from '../../../components/Modal/select-file-form';
import AddFolderForm from '../../../components/Modal/add-folder-form';
import {removeDocDataList,removeDepthData,setDocDataList} from '../../../utils/storageUtils';
//import { DaosListDemo1,DaosListDemo2,DaosListDemo3,DocList } from '../../../config/daosList';
import SplitPane from 'react-split-pane';
import {reqProcessDocDataList,reqProcessMbData} from '../../../api';
import html2canvas from 'html2canvas';

import TwoDim2Echarts from '../../../components/echarts/two-dim2-echart';   
import { SketchPicker } from 'react-color';
import './original/set-color.css';
import SetColor from './original/set-color';


 
class TwoDimShow extends Component {  

  state = {
    visible: '0',
    docId: '',   // 存储文件id
    curves_mb: [],
  }

 

  handlesaveDocPic = async() => {    // 另存为图片   vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    document.getElementsByClassName('iconfont')[1].style.display='none';
    const newCanvas = document.createElement("canvas");
    const element = document.querySelector('.content-left');

    const dom_width = parseInt(window.getComputedStyle(element).width);
    const dom_height = parseInt(window.getComputedStyle(element).height);
    console.log(dom_width)
    console.log(dom_height)
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    newCanvas.width = dom_width * 2;
    newCanvas.height = dom_height * 2;
    newCanvas.style.width = dom_width + "px";
    newCanvas.style.height = dom_height + "px";
    newCanvas.style.background = 'transparent'
    const context = newCanvas.getContext("2d");
    context.scale(1.8, 1.8);

    html2canvas(element, { canvas: newCanvas, backgroundColor: null }).then((canvas) => {
        const imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
        const base64ToBlob = (code) => {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
      
            let uInt8Array = new Uint8Array(rawLength);
      
            for (let i = 0; i < rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        };
        const blob = base64ToBlob(imgUri);
        // window.location.href = imgUri; // 下载图片
        // 利用createObjectURL，模拟文件下载
        const fileName = '井眼轨迹图.png';
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
        } else {
            const blobURL = window.URL.createObjectURL(blob)
            const vlink = document.createElement('a');
            vlink.style.display = 'none';
            vlink.href = blobURL;
            vlink.setAttribute('download', fileName);

            if (typeof vlink.download === 'undefined') {
                vlink.setAttribute('target', '_blank');
            }

            document.body.appendChild(vlink);

            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            vlink.dispatchEvent(evt);

            document.body.removeChild(vlink);
            window.URL.revokeObjectURL(blobURL);
        }
    }); 
    setTimeout(()=>{
      document.getElementsByClassName('iconfont')[1].style.display='block';
    })
  }; 


  componentWillUnmount(){    // 换页的时候会被调用
    console.log("即将被卸载！",this);
    removeDocDataList();  // 清空 内存中的文件
    removeDepthData();  // 清空 内存中的 初始深度
    this.props.initDaosDataList1([]);  // 清空 reducer中的 模板数据
    this.props.initdocData({});  // 清空 reducer中的 文件
    this.props.initmbData([]);   // 清空 reducer中的 模板
    this.props.doNull(!this.props.isDoNull);   // 清空侧边栏
  }

  render() {
    return (
      <div className="depth-two-dim-wrapper">
        <div className="content" style={{background:'none'}}>
           <SplitPane split="vertical">
            <div className="content-left" style={{background:'none'}}>
            {/* <i className="iconfont "  onClick={()=>{window.location.reload()}} style={{cursor:'pointer',marginRight:'5px'}}>&#xe710;</i> */}
            <div className='header-wrapper' style={{paddingLeft:10}}>
              <i className="iconfont " onClick={this.handlesaveDocPic} style={{cursor:'pointer',color:"#fff",fontSize:20}}>&#xe604;</i>
            </div>
              <TwoDim2Echarts 
                CurType={this.props.twoDimData.curveType}
                // docdata={this.props.docData}
                selectedCurve1={this.props.twoDimData.selectedCurve1}
                selectedCurve2={this.props.twoDimData.selectedCurve2}
              />
            </div>
            {/* <div className="content-right">
              <div className="show-content"> 
                <DaoDemo1 daosDataList={this.props.daosDataList1} />
              </div>
            </div>   */}
          </SplitPane>  
        </div>
      </div> 
    )    
  }
}

export default connect(
  state => ({twoDimData:state.twoDimData,daosDataList1: state.daosDataList1,selectedCurveShow1: state.selectedCurveShow1, defaultmbData: state.defaultmbData, isDoNull: state.isDoNull, docData: state.docData}),  // 获取 数据处理页面列表，没有传入曲线数据前，获取的是 道列表，也就是默认模板
  {setEditDepthData1,getCurvesIntoDao1,getDaosMb1,initDaosDataList1,initdocData,initmbData,setDocInReducer,setMbInReducer,doNull}        //getDaosMbShow,
)(TwoDimShow);



 
 
      